import React, { Component } from "react";
import { SafeAreaView, Text, View, TouchableOpacity, StyleSheet, Image, ScrollView, TextInput, RefreshControl, Platform, Dimensions, DeviceEventEmitter } from 'react-native';
import { connect } from 'react-redux'
import actions from '../../action'
import HttpUtils from '../../utils/HttpUtils'
import HttpUrls from '../../utils/HttpUrls'
import Constant from '../../utils/Constant'
import { ToastToUser } from "../../utils/CustomToast";
import StatusBarSelf from "../../components/StatusBarSelf";
import { getImgUrl, getPerm } from '../../utils/ComFunction';
import { OrderStatus, PermissionType } from "../../utils/Enum";
import { Switch } from "react-native-gesture-handler";
import AsyncImage from "../../components/image/AsyncImage";
import InFormPage from "../msg/InFormPage";

let navigation

const isIos = Platform.OS == 'ios';

const screenW = Dimensions.get('window').width;


const itemWidth = 50;

class WorkCenterPage extends Component {

    constructor(props) {
        super(props);
        let addCarPerm = getPerm(PermissionType.Permission_EnableAddCar)

        let pricePerm = getPerm(PermissionType.Permission_EnableOfferPriceView)

        let purchaseCenterPerm = getPerm(PermissionType.Permission_EnablePurchaseCenter)

        let itemSpace = addCarPerm ? 14 : ((screenW - 16 * 2 - 5 * 52) / 6)

        this.state = {
            addCarPerm,
            purchaseCenterPerm,
            pricePerm,
            itemSpace: itemSpace,
            keyword: '',
            refreshing: false,
            merchantDetail: {},
            memberIcon: null,
            isFranchisee: Constant.userInfo.isFranchisee,//是否加盟商 0：否，1：是
            conversationQuantity: 0,
            quotationQuantity: 0,
            noAskingQuantity: 0,
            currentStockNum: 0,
            todayBooking: 0,
            todaySold: 0,
            pendingSignCount: 0, //待签署
            pendingShipCount: 0, //待发货
            pendingPrepayCount: 0, //待预付
            pendingReceiveCount: 0, //待收货
            pendingSettleCount: 0, //待结算
            inAfterSalesCount: 0, //售后中

        };
    }

    componentWillUnmount() {
        if (this.publishCarListener) {
            this.publishCarListener.remove()
        }

    }

    componentDidMount() {
        this.publishCarListener = DeviceEventEmitter.addListener('publishCarSuccess', e => {
            this.getStaticsData()
        });
        this.focusListener = this.props.navigation.addListener('focus', () => {
            console.log('WorkCenterPage 已聚焦');
            if (this.state.isFranchisee) {
                this.getStaticsData()
            }
            this.getQuotationStatistics()
            this.getOrderStatistics()
            DeviceEventEmitter.emit('homeListener', { isInHome: true, index: 0 });
        });
        this.getData()
    }

    render() {
        navigation = this.props.navigation
        const { logininfo, addLoginInfo, clearLoginInfo } = this.props;    // 从props中将redux相关数据和方法引入
        return (
            <View style={styles.container}>
                {
                    isIos ?
                        <View>
                            <Image style={{ width: '100%', height: Constant.statusBarHeight, resizeMode: "stretch" }} source={require('source/image/workCenter/work_center_status_bar.png')} />
                            <Image style={styles.bannerImg} source={require('source/image/workCenter/work_center_top_banner.png')} />
                        </View>
                        :
                        <View>
                            <Image style={{ width: '100%', height: Constant.statusBarHeight, resizeMode: "stretch" }} source={require('source/image/workCenter/work_center_status_bar.png')} />
                            <Image style={[styles.bannerImg, { height: 186 }]} source={require('source/image/workCenter/work_center_banner.png')} />
                        </View>

                }
                <ScrollView
                    style={{ paddingHorizontal: 16 }}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh.bind(this)}
                        />
                    }
                    showsVerticalScrollIndicator={false}
                >
                    <TouchableOpacity
                        style={styles.companyBox}
                        onPress={() => {
                            navigation.navigate('CompanyDetailPage', {
                                merchantId: Constant.userInfo.merchantId,
                                isFranchisee: Constant.userInfo.isFranchisee,
                                isLookCarDetail: Constant.userInfo.isFranchisee ? true : false
                            })
                        }}
                    >
                        <AsyncImage style={styles.headImg} source={{ uri: getImgUrl(this.state.merchantDetail && this.state.merchantDetail.merchantLogoPic ? this.state.merchantDetail.merchantLogoPic : '') }} defaultSource={require('source/image/comm/sc_default.png')} />

                        <Text style={styles.companyText} numberOfLines={1}>{this.state.merchantDetail && this.state.merchantDetail.merchantName}</Text>
                        {Constant.userInfo.isFranchisee == 1 ? null :
                            <Image
                                source={this.state.memberIcon}
                                style={styles.vipIcon}
                            />
                        }

                    </TouchableOpacity>
                    <View style={styles.searchBox}>
                        <View style={styles.searchBg}>
                            <Image style={styles.searchIcon} source={require('source/image/comm/icon_sc_search.png')} />
                            <TextInput
                                clearButtonMode='while-editing'
                                style={styles.textInput}
                                placeholder='请输入车辆名称或库存号'
                                returnKeyType='search'
                                value={this.state.keyword}
                                onSubmitEditing={() => {
                                    navigation.navigate('CarStockListPage', { keyword: this.state.keyword })
                                }}
                                onChangeText={this.onChangeTextHandle}
                            />
                            <View style={styles.verticalLine} />
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.searchRightBox}
                                onPress={() => {
                                    navigation.navigate('CarStockListPage', { keyword: this.state.keyword })
                                }}
                            >
                                <Text style={styles.searchText}>搜索</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View></View>

                    {/* 15258864650   卖车的*/}
                    {/* 13505762119  15653666988-孙总 买车的*/}
                    {/* 15825295301 卖方外部录车人员 */}

                    <View style={styles.toolBox}>
                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
                            {/* 原ScrollView中的内容保持不变，但需要调整样式以适应两行布局 */}
                            {
                                this.state.addCarPerm ?
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        style={styles.toolItemBox}
                                        onPress={() => {
                                            navigation.navigate('PublishCarPage')
                                        }}
                                    >
                                        <Image style={styles.toolItemImg} source={require('source/image/workCenter/publish_car_icon.png')} />
                                        <Text style={styles.toolItemText}>发布车辆</Text>
                                    </TouchableOpacity>
                                    :
                                    null
                            }

                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.toolItemBox}
                                onPress={() => {
                                    navigation.navigate('CarStockListPage')

                                }}
                            >
                                <Image style={styles.toolItemImg} source={require('source/image/workCenter/car_manage_icon.png')} />
                                <Text style={styles.toolItemText}>车源管理</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.toolItemBox}
                                onPress={() => {
                                    navigation.navigate('DetectionListPage')
                                }}
                            >
                                <Image style={styles.toolItemImg} source={require('source/image/workCenter/detection_icon.png')} />
                                <Text style={styles.toolItemText}>检测中心</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.toolItemBox}
                                onPress={() => {
                                    navigation.navigate('StrictCarListPage')
                                }}
                            >
                                <Image style={styles.toolItemImg} source={require('source/image/workCenter/strict_icon.png')} />
                                <Text style={styles.toolItemText}>严选车源</Text>
                            </TouchableOpacity>

                            {Constant.userInfo.isFranchisee == 1 ?
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.toolItemBox}
                                    onPress={() => {
                                        navigation.navigate('JoinCarListPage')
                                    }}
                                >
                                    <Image style={styles.toolItemImg} source={require('source/image/workCenter/strict_icon.png')} />
                                    <Text style={styles.toolItemText}>加盟车源</Text>
                                </TouchableOpacity>
                                :
                                null
                            }

                            {Constant.userInfo.isFranchisee == 1 ?
                                null
                                :
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.toolItemBox}
                                    onPress={() => {
                                        this.pushShop()
                                    }}
                                >
                                    <Image style={styles.toolItemImg} source={require('source/image/workCenter/company_wd_icon.png')} />
                                    <Text style={styles.toolItemText}>公司微店</Text>
                                </TouchableOpacity>
                            }

                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.toolItemBox}
                                onPress={() => {
                                    navigation.navigate('FoursQuery')
                                }}
                            >
                                <Image style={styles.toolItemImg} source={require('source/image/workCenter/weibao_icon.png')} />
                                <Text style={styles.toolItemText}>维保出险</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.toolItemBox}
                                onPress={() => {
                                    navigation.navigate('ContractListPage')
                                }}
                            >
                                <Image style={styles.toolItemImg} source={require('source/image/workCenter/contract_icon.png')} />
                                <Text style={styles.toolItemText}>电子合同</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {this.state.pricePerm ?
                        <View style={styles.serviceBox}>
                            <View style={styles.serviceTitleBox}><Text style={styles.titleText}>报价中心</Text></View>
                            <View style={styles.serviceBottomBox}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.serviceBottomItemBox}
                                    onPress={() => {
                                        if (this.state.isFranchisee) {
                                            navigation.navigate('OfferPriceCenterPage', { priceStatus: 1 });
                                        } else {
                                            navigation.navigate('PreferenceCarListPage', { dealStatus: 1 });
                                        }
                                    }}
                                >
                                    <Text style={styles.serviceBottomItemTitle}>{this.state.isFranchisee ? '未询价' : '待处理'}</Text>
                                    <Text style={styles.serviceBottomItemDes}>{this.state.noAskingQuantity}</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.serviceBottomItemBox}
                                    onPress={() => {
                                        if (this.state.isFranchisee) {
                                            navigation.navigate('OfferPriceCenterPage', { priceStatus: 2 });
                                        } else {
                                            navigation.navigate('OfferPriceCenterPage', { dealStatus: 2 });
                                        }
                                    }}
                                >
                                    <Text style={styles.serviceBottomItemTitle}>沟通中</Text>
                                    <Text style={styles.serviceBottomItemDes}>{this.state.conversationQuantity}</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={[styles.serviceBottomItemBox, { marginRight: 0 }]}
                                    onPress={() => {
                                        if (this.state.isFranchisee) {
                                            navigation.navigate('OfferPriceCenterPage', { priceStatus: 4 });
                                        } else {
                                            navigation.navigate('OfferPriceCenterPage', { dealStatus: 4 });
                                        }
                                    }}
                                >
                                    <Text style={styles.serviceBottomItemTitle}>待确认</Text>
                                    <Text style={styles.serviceBottomItemDes}>{this.state.quotationQuantity}</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        : null}


                    <View style={styles.serviceBox}>
                        <TouchableOpacity
                            style={styles.serviceTitleBox}
                            activeOpacity={0.8}
                            onPress={() => {
                                navigation.navigate('OrderListPage')

                            }}
                        >
                            <Text style={styles.titleText}>{this.state.isFranchisee ? '销售订单' : '采购订单'}</Text>
                            <View style={{ flexDirection: "row", alignItems: 'center' }}>
                                <Text style={{ color: '#999999', fontSize: 12 }}>全部</Text>
                                <Image style={{ width: 12, height: 12, marginLeft: 2 }} source={require('source/image/comm/arrow_gray_icon.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={styles.serviceBottomBox}>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.serviceBottomItemBox}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusWaitSign
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>待签署</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.pendingSignCount}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={[styles.serviceBottomItemBox, {}]}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusWaitPay
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>待付款</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.pendingPrepayCount}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={[styles.serviceBottomItemBox, { marginRight: 0 }]}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusWaitDelivery
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>待发货</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.pendingShipCount}</Text>
                            </TouchableOpacity>

                        </View>
                        <View style={styles.serviceBottomBox}>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.serviceBottomItemBox}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusWaitReceipt
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>待收货</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.pendingReceiveCount}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.serviceBottomItemBox}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusWaitSettlement
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>待结算</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.pendingSettleCount}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={[styles.serviceBottomItemBox, { marginRight: 0 }]}
                                onPress={() => {
                                    navigation.navigate('OrderListPage', {
                                        orderStatus: OrderStatus.OrderStatusServicing
                                    })
                                }}
                            >
                                <Text style={styles.serviceBottomItemTitle}>售后中</Text>
                                <Text style={styles.serviceBottomItemDes}>{this.state.inAfterSalesCount}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {
                        this.state.isFranchisee ?
                            <View style={styles.serviceBox}>
                                <View style={styles.serviceTitleBox}><Text style={styles.titleText}>车源概览</Text></View>
                                <View style={styles.serviceBottomBox}>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        style={styles.serviceBottomItemBox}
                                        onPress={() => {
                                            navigation.navigate('CarStockListPage')
                                        }}
                                    >
                                        <Text style={styles.serviceBottomItemTitle}>当前车源</Text>
                                        <Text style={styles.serviceBottomItemDes}>{this.state.currentStockNum}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        style={styles.serviceBottomItemBox}
                                        onPress={() => {
                                            navigation.navigate('CarStockListPage', { entranceType: 'SCCarEntranceTypeTodayReserve' })
                                        }}
                                    >
                                        <Text style={styles.serviceBottomItemTitle}>今日预定</Text>
                                        <Text style={styles.serviceBottomItemDes}>{this.state.todayBooking}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        style={[styles.serviceBottomItemBox, { marginRight: 0 }]}
                                        onPress={() => {
                                            navigation.navigate('CarStockListPage', { entranceType: 'SCCarEntranceTypeTodaySold' })
                                        }}
                                    >
                                        <Text style={styles.serviceBottomItemTitle}>今日销售</Text>
                                        <Text style={styles.serviceBottomItemDes}>{this.state.todaySold}</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            :
                            null
                    }

                </ScrollView>
            </View>
        );
    }

    onRefresh() {
        this.setState({
            refreshing: true
        })
        this.getData()
    }

    getData() {
        this.getMerchantDetail()
        this.getMemberInfo()
        // this.getBuyerInfo()
        // if (this.state.isFranchisee) {
        //     this.getStaticsData()
        // }
        // this.getQuotationStatistics()
        // this.getOrderStatistics()
    }

    getMerchantDetail() {
        let param = {
            merchantId: Constant.userInfo.merchantId
        }
        HttpUtils.getRequest(HttpUrls.getMerchantDetail, param)
            .then((result) => {
                this.setState({
                    refreshing: false,
                    merchantDetail: result.data
                })

            })
            .catch((error) => {
                this.setState({
                    refreshing: false
                })
            });
    }
    //获取买手信息
    // getBuyerInfo(){
    //     let param = {
    //         userId: Constant.userInfo.userId
    //     }
    //     HttpUtils.getRequest(HttpUrls.getBuyerDetailByUserId, param)
    //         .then((result) => {
    //             console.log("买手信息",result.data)
    //             Constant.userInfo.buyerId = 0
    //             if(result.data){
    //                 Constant.userInfo.buyerId = result.data?.buyerId || 0
    //             }
    //         })
    //         .catch((error) => {
    //             this.setState({
    //                 refreshing: false
    //             })
    //         });
    // }
    getMemberInfo() {
        HttpUtils.getRequest(HttpUrls.getMerchantMember, { merchantId: Constant.userInfo.merchantId })
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data

                    let memberClass = data.memberClass
                    if (data.expireTime && data.expireTime > 0) {
                        if (memberClass == 20) {
                            this.setState({
                                memberIcon: require('source/image/company/sc_member_class_honest_member_label.png')
                            })
                        } else if (memberClass == 30) {
                            this.setState({
                                memberIcon: require('source/image/company/sc_member_class_honest_member_label.png')
                            })
                        } else if (memberClass == 40) {
                            this.setState({
                                memberIcon: require('source/image/company/sc_member_class_strictly_member_label.png')
                            })
                        } else {
                            this.setState({
                                memberIcon: require('source/image/company/sc_member_class_alliance_member_badge.png')
                            })
                        }
                    }
                }
            })
            .catch((error) => {

            });
    }

    getStaticsData() {
        HttpUtils.getRequest(HttpUrls.stockOverview, { merchantId: Constant.userInfo.merchantId })
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    this.setState({
                        currentStockNum: result.data.currentStockNum ? result.data.currentStockNum : 0,
                        todayBooking: result.data.todayBooking ? result.data.todayBooking : 0,
                        todaySold: result.data.todaySold ? result.data.todaySold : 0,
                    })
                }
            })
            .catch((error) => {

            });
    }

    getQuotationStatistics() {
        let params = {
            isQuotationSeller: Constant.userInfo.isFranchisee == 1 ? 1 : 0, //是否卖家
            isQuotationBuyer: Constant.userInfo.isFranchisee == 1 ? 0 : 1 //是否买家
        }
        HttpUtils.postRequest(HttpUrls.quotationStatistics, params)
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data
                    this.setState({
                        conversationQuantity: data.conversationQuantity ? data.conversationQuantity : 0,
                        quotationQuantity: data.quotationQuantity ? data.quotationQuantity : 0,
                        noAskingQuantity: data.noAskingQuantity ? data.noAskingQuantity : 0,
                    })
                }
            })
            .catch((error) => {

            });
    }

    getOrderStatistics() {
        let params = {
            role: Constant.userInfo.isFranchisee == 1 ? 2 : 1, //1买家，2卖家
        }
        HttpUtils.postRequest(HttpUrls.ordersStatistics, params)
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data
                    this.setState({
                        pendingSignCount: data.pendingSignCount ? data.pendingSignCount : 0,
                        pendingShipCount: data.pendingShipCount ? data.pendingShipCount : 0,
                        pendingPrepayCount: data.pendingPrepayCount ? data.pendingPrepayCount : 0,
                        pendingReceiveCount: data.pendingReceiveCount ? data.pendingReceiveCount : 0,
                        pendingSettleCount: data.pendingSettleCount ? data.pendingSettleCount : 0,
                        inAfterSalesCount: data.inAfterSalesCount ? data.inAfterSalesCount : 0,
                    })
                }
            })
            .catch((error) => {

            });
    }

    onChangeTextHandle = (value) => {
        this.setState({
            keyword: value
        })
    }

    pushShop() {
        let url = Constant.webDomain + '/app/merchantpage?merchantId=' + Constant.userInfo.merchantId + '&shareUserId=' + Constant.userInfo.userId + 'shareMerchantId=' + Constant.userInfo.merchantId
        console.log(url)
        navigation.navigate('WebView', {
            title: '公司微店',
            source: url
        })
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
        flexDirection: 'column',
    },
    bannerImg: {
        position: 'absolute',
        top: 0,
        width: '100%',
        height: 142
    },
    companyBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '100%',
        height: 44,
    },
    searchBox: {
        width: '100%',
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
    },
    searchBg: {
        backgroundColor: '#FFFFFF',
        width: '100%',
        height: 34,
        borderRadius: 6,
        paddingLeft: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    searchIcon: {
        width: 16,
        height: 16
    },
    textInput: {
        marginLeft: 10,
        flex: 1,
        height: '100%',
        fontSize: 14,
        padding: 0
    },
    verticalLine: {
        width: 1,
        height: 10,
        backgroundColor: '#666666'
    },
    searchRightBox: {
        width: 48,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    searchText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500'
    },
    headImg: {
        width: 36,
        height: 36,
        borderRadius: 18
    },
    companyText: {
        flex: 1,
        marginLeft: 8,
        color: '#222222',
        fontSize: 16,
        fontWeight: '500'
    },
    vipIcon: {
        width: 80,
        height: 30,
        marginLeft: 10,
        resizeMode: 'contain'
    },
    toolBox: {
        marginTop: 12,
        width: '100%',
        // height: 92,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingBottom: 15,
    },
    toolItemBox: {
        flexDirection: 'column',
        alignItems: 'center',
        // width: itemWidth,
        width:  (screenW - 32) / 5,
        // marginVertical: 15,
        marginTop: 15,
    },
    toolItemBox1: {
        flexDirection: 'column',
        alignItems: 'center',
        // width: itemWidth,
        width:  (screenW - 32) / 5,
        marginTop: 15,
    },
    toolItemImg: {
        width: 32,
        height: 32
    },
    toolItemText: {
        color: '#333333',
        fontSize: 12,
        marginTop: 9
    },
    serviceBox: {
        marginTop: 10,
        paddingHorizontal: 10,
        paddingVertical: 14,
        backgroundColor: '#fff',
        borderRadius: 6,
        flexDirection: 'column'
    },
    serviceTitleBox: {
        height: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    titleText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: '500',
        textAlignVertical: 'center'
    },
    serviceBottomBox: {
        marginTop: 14,
        flexDirection: 'row',
        // justifyContent: 'space-between'
    },
    serviceBottomItemBox: {
        height: 70,
        borderRadius: 6,
        backgroundColor: '#F4F4F4',
        flex: 1,
        marginRight: 12,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        paddingLeft: 9,
    },
    serviceBottomItemTitle: {
        color: '#666666',
        fontSize: 12
    },
    serviceBottomItemDes: {
        marginTop: 6,
        color: '#333333',
        fontSize: 18,
        fontWeight: '500',
        marginLeft: 3,
    },



    textSize: {
        fontSize: 24,
        color: '#333333',
        textAlign: 'center',
        lineHeight: 50
    },
    storeSize: {
        color: '#ff8866',
        fontSize: 22,
        lineHeight: 50
    }
})

// 将redux中数据传到视图层（state为redux中所有数据）
const mapStateToProps = state => ({
    logininfo: state.logininfo
});

// 视图层改变redux数据操作
const mapDispatchToProps = dispatch => ({
    addLoginInfo: (value) => dispatch(actions.addLoginInfo(value)),
    clearLoginInfo: () => dispatch(actions.clearLoginInfo())
});

export default connect(mapStateToProps, mapDispatchToProps)(WorkCenterPage);